<template>
  <div>
    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="notice"
        stripe
        style="width: 100%"
        :max-height="tableHeight">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template  #default="props">
            <el-form label-position="left" inline>
              <el-form-item>
                <span style="margin-left: 70px">{{ props.row.noticeAbstract}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="noticeTitle"
          label="题目"
          fit>
        </el-table-column>
        <el-table-column
          label="发布日期"
          width="200px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.pushTime|datefmt}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="star"
          label="访问量"
          width="70">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="280">
          <template #default="scope">
            <el-button
              @click.native.prevent="view(scope.row)"
              type="text"
              size="small">
              查看
            </el-button>
            <el-button
              @click.native.prevent="edit(scope.row)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="changeType(scope.row)"
              type="text"
              size="small">
              类型更改
            </el-button>
            <el-button
              @click.native.prevent="deleteX(scope.row)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="删除"
      :visible.sync="dialogDelete">
      <span>此操作会删除{{notice.title}}</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="del(selectNotice)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改类型"
      :visible.sync="dialogChange">
        <el-radio-group v-model="selectTypeId">
          <el-radio v-for="(type,i) in types" :key="i" :label="type.typeId">{{type.typeName}}</el-radio>
        </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChange = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitChange(selectTypeId)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import api from '../../apis/admin/notice'
import {Message} from 'element-ui'

export default {
  name: 'noticeMixin',
  // mixins: {ObjectMixin}
  props: {
    typeId: 0
  },
  data () {
    return {
      dialogDelete: false,
      dialogChange: false,
      total: 0,
      currentPage: 1,
      pageSize: 4,
      list: [],
      selectNotice: [],
      selectTypeId: 0,
      types: [],
      notice: []
    }
  },
  computed: {
    tableHeight () {
      return window.innerHeight - 320
    }
  },
  mounted () {
    this.loadNotice()
    this.loadType()
  },
  methods: {
    async loadType () {
      const result = await api.loadType()
      this.types = result.data
      this.selectTypeId = JSON.parse(JSON.stringify(this.typeId))
    },
    async del (notice) {
      const result = await api.deleteNotice(notice.id)
      if (result.code === 200) {
        await this.loadNotice()
        Message.success(result.msg)
      } else {
        Message.error(result.msg)
      }
      this.dialogDelete = false
    },
    async loadNotice () {
      const result = await api.loadNotice(this.currentPage, this.pageSize, this.typeId)
      if (result.code === 200) {
        this.total = result.data.total
        this.notice = result.data.records
      } else {
        this.total = 0
        this.notice = []
      }
      this.selectTypeId = JSON.parse(JSON.stringify(this.typeId))
    },
    view (notice) {
      this.$router.push(
        {
          name: 'article',
          params: {
            id: notice.id
          }
        }
      )
    },
    edit (notice) {
      this.$router.push(
        {
          name: 'editor',
          params: {
            notice
          }
        }
      )
    },
    deleteX (notice) {
      this.dialogDelete = true
      this.selectNotice = notice
    },
    changeType (notice) {
      this.dialogChange = true
      this.selectNotice = notice
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loadNotice()
    },
    async onSubmitChange (typeId) {
      console.log(this.selectNotice.id)
      console.log(typeId)
      const result = await api.updateType(typeId, this.selectNotice.id)
      if (result.code === 200) {
        await this.loadNotice()
        Message.success(result.msg)
        this.dialogChange = false
      } else {
        Message.error((result.msg))
      }
    }
  }
}
</script>

<style scoped>

</style>
